<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>jQuery中filter方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <style type="text/css" media="screen">
      body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em "微软雅黑";
      }

      h1 {
        color: green;
      }

      .info {
        background-color: yellow;
      }
    </style>
    <script>
      jQuery(document).ready(function () {
        // 选择指定列
        $("td:nth-child(5n+3)")
          // 将函数作为参数传给filter方法
          .filter(function () {
            console.log($(this).text());
            if ($(this).text() < 21) {
              return true;
            } else {
              return false;
            }
          })
          .addClass("info");
      });
    </script>
  </head>

  <body>
    <h1>jQuery中的filter方法</h1>
    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>专业</th>
      </tr>
      <tr>
        <td>1</td>
        <td>小明</td>
        <td>21</td>
        <td>男</td>
        <td>新闻</td>
      </tr>
      <tr>
        <td>2</td>
        <td>小冷</td>
        <td>20</td>
        <td>女</td>
        <td>广告</td>
      </tr>
      <tr>
        <td>3</td>
        <td>小宝</td>
        <td>22</td>
        <td>女</td>
        <td>数学</td>
      </tr>
      <tr>
        <td>4</td>
        <td>老盖</td>
        <td>24</td>
        <td>男</td>
        <td>软件工程</td>
      </tr>
    </table>
  </body>
</html>
